<template>
                <el-dialog  title="工单配置" :visible="alert" width="630px" @close="closealert" >
                  <!-- 默認插槽 需求表单 -->
                  <el-form :model="alertform" label-width="80px">
                  <el-form-item   :rules="[{ required: true, message: ''},]" label-width="140px" label="补货警戒线" ><el-input-number v-model="alertform.alertValue" style="width:396px" controls-position="right" :min="1" :max="100"></el-input-number></el-form-item>
                  </el-form>
                  <!-- footer-butotn -->
                  <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
                    <el-button @click="closealert" class="cancel">取 消</el-button>
                    <el-button type="primary" class="comfirm" @click="submit">确 定</el-button>
                  </span>
                </el-dialog>
</template>

<script>
import { autoSupply } from '@/api/orders/'
export default {
  props: {
    alert: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      alertform: {
        alertValue: 0
      }
    }
  },
  methods: {
    closealert () {
      this.$emit('update:alert', false)
    },
    async submit () {
      try {
        const res = await autoSupply(this.alertform)
        console.log(res)
        this.$message.success('设置成功')
      } catch (err) {
        this.$message.error(err.response.data)
      } finally {
        this.closealert()
      }
    }
  }

}
</script>

<style lang="less" scoped>
.dialog-footer {//form-footer 確認框
  .comfirm {
    background: linear-gradient(135deg, #ff7d43, #db3602) !important;
    border: none;
  }
  .comfirm:hover {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  }
  .cancel {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
  }
  .cancel:hover {
    background: #f3e7e1 !important;
  }
}
</style>
